<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素 心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 300px auto;
				/* 旋转 */
				transform: rotate(135deg);
				/* 透明度属性：属性值 0~1 范围值 */
				opacity: .8;
				/*滤镜属性：光晕：下阴影
				drop-shadow( X值 Y值 模糊范围 模糊颜色)
				*/
				filter: drop-shadow(0 0 100px #e4393c);
				/* 2动画属性:关键帧名称 过渡时间 过渡方式 无线循环 */
				animation: heart .8s linear infinite;
			}
			/* ③伪类选择器：给元素附加上效果的选择器
			   语法：div:hover{} 当鼠标悬停到div上 实现【样式】效果
			   需求：鼠标悬停在中心位置变成圆
			   选择器：before 在元素之前添加文本,通常与content：""
			   选择器：after  在元素之后添加文本,通常与content：""
			*/
		   /* 伪类选择器div上方增加文本/画圆*/
			
			div:before{
				content: "";/* 行转块 */
				/* 显示属性
				 display: block;转成块级元素
				 display: inline;转成行级元素
				 display：none;元素消失
				 */
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				/* 相对定位 */
				position: relative;
				left: -100px;
			}
			div:after{
				content: "";/* 行转块 */
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				top: -100px;
			}
			/* -----------------动画---------------------- */
			/* 1.创建关键帧--手翻书 */
			@keyframes heart{
			 /* 3个画面*:①等比例出现，防止跳帧 ②缩小比例③放大比例*/
			 0%{
				 /* 转换属性：缩放属性值   
				 1表示等比例  
			     .8表示缩小0.8倍
				 1.2表示放大1.2倍
				 transform复合属性： 旋转 缩放
				 */
				 transform: rotate(135deg) scale(1);
			 }
			 30%{
				 transform: rotate(135deg) scale(.8);
			 } 
			 100%{
				 transform: rotate(135deg) scale(1.2);
			 }
			}
		</style>
	</head>
	<body>
		<!-- 画一颗心 html 1个元素 -->
		<div></div>
		<!-- html: 元素的分类，按照元素的特点分为：
		            ①块元素：可以设置高宽、独占一行，典型块元素：div
					②行元素：不可以设置高宽、可以在一行内显示,典型行元素：span
					文本内容属于行元素
					③行内块元素：可以设置高宽、可以在一行内显示，典型行内元素：img
		-->
		<!-- 音乐 老火狐 -->
		<audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>